//学员账号管理

import React, { useEffect, useState } from 'react';
import { Layout, Form, Input, Button, Table,Modal, message,Space, Card } from 'antd';
import { fetchSearchUserInfo } from '@/store/modules/adminInf';
import { useDispatch, useSelector } from 'react-redux';
import { updateStudentInfoAPI } from '@/api/admin';
import { getSearchStudentInformation } from '@/utils';
const { Search } = Input;

const { Header, Content, Footer } = Layout;

const StudentAccount = () => {
  const dispatch =useDispatch()
  const [form] = Form.useForm();
  const [searchData,setSearchData] =useState([])
  const [modalVisible, setModalVisible] = useState(false);

  const columns = [
    {
      title: '学员学号',
      dataIndex: 'studentId',
      key: 'studentId',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '身份证号码',
      dataIndex: 'idCard',
      key: 'idCard',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '账号密码',
      dataIndex: 'password',
      key: 'password',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button onClick={() => handleEdit(record)}>编辑</Button>
          <Button onClick={() => handleDelete(record.studentId)}>删除</Button>
        </Space>
      ),
    },
  ];

  const handleEdit = (record) => {
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (key) => {
    console.log("key:",key)
    setSearchData(searchData.filter(item => item.studentId !== key));
  };
  const handleSave = () => {
      const initData ={}
      form.validateFields()
      .then(values =>{
        //  dispatch( fetchUserInitInfo({
        //   ...data,
        //   name:values.name,
        //   age:values.age,
        //   idCard:values.idCard,
        //   phone:values.phone,
        //   password:'123456'
        // },'student'))
        //  setStudentInfoAPI()
        // updateStudentInfoAPI()
        console.log(values)
        // updateStudentInfoAPI(
        //   {
        //     ...initData,

        //   }
        // )
          message.success('修改成功！')
          form.resetFields();//清空内容
          setModalVisible(false);
          // setData(newData)
        })
        .catch(error => console.error(error));
       
    }
  const onSearch = async(value, _e, info) => {
    console.log(value)
    await dispatch(fetchSearchUserInfo(value,'student'))
    const res=getSearchStudentInformation()
    setSearchData(res)
    message.success('搜索成功！')
  }

  return (
    <Layout>
      <Header style={{ color: 'white' }}>学员账号管理</Header>
      <Content style={{ padding: '10 50px' }}>
        <Card>
        <div>
      <Space direction="vertical">
    <Search
      placeholder="请输入学员学号"
      onSearch={onSearch}
      style={{
        width: 200,
      }}
    /></Space>
      </div>
        </Card>
      
        <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
          <Table columns={columns} dataSource={searchData} />
        </div>
        <Modal
          title="编辑账号信息"
          visible={modalVisible}
          cancelText='取消'
          okText='提交'
          onCancel={() => setModalVisible(false)}
          onOk={handleSave}
        >
          <Form form={form} layout="vertical" initialValues={{}}>
            <Form.Item name="key" hidden><Input /></Form.Item>
            <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="年龄" name="age" rules={[{ required: true, message: '请输入年龄' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="手机号" name="phone" rules={[{ required: true, message: '请输入手机号' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="身份证号码" name="idCard" rules={[{ required: true, message: '请输入身份证号码' }]}>
              <Input />
            </Form.Item>
          </Form>
        </Modal>
      </Content>
      <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统&copy;2024-2099</div>
   </Footer>
    </Layout>
  );
};

export default StudentAccount;